<template>
  <div class="guide is-wide">
    <the-head></the-head>
    <guide-create></guide-create>
    <guide-import></guide-import>
    <guidel-suggest></guidel-suggest>
    <the-footer></the-footer>
  </div>
</template>

<script>

import TheHead from '../components/TheHead.vue';
import GuideImport from '../components/guide/GuideImport.vue';
import TheFooter from '../components/TheFooter.vue';
import GuidelSuggest from '../components/guide/GuidelSuggest.vue';
import GuideCreate from '../components/guide/GuideCreate.vue';

export default {
  components: {
    TheHead,
    GuideImport,
    TheFooter,
    GuidelSuggest,
    GuideCreate,
  },
};
</script>

<style lang="scss" scoped>

.guide{
  padding-top: 60px;
}

.gui{
  min-width: 980px;
}

.banner{
  display: flex;
  justify-content: space-between;
}

.type{
  flex-grow: 1;
  width: 421px;
  height: 450px;
}

.create-by-empty{
  background-color: rgba(46, 140, 219, 0.95);
}

.create-by-empty:hover {
  background-color: #328edc;
}

.inner{
  color:#fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin-top: -3px;
}

.type-show{
  background-image: url('../assets/23.png');
  background-position: -168px 2px;
  background-repeat: no-repeat;
  width: 110px;
  height: 112px;
  background-size: calc(386px * .72);
}

.title{
  margin-top: 30px;
  font-size: 24px;
}

.template{
}

.subtitle{
  font-size: 18px;
  margin-bottom: 38px;;
}

.btn{
  text-decoration: none;
  color: #fff;
  border-radius: 3px;
  border: 1px solid #fff;
  width: 103px;
  height: 43px;
  line-height: 43px;
  text-align: center;
}

.btn:hover {
  color: #4597df;
  background: #ffffff;
}

.create-by-template{
  background-color: #52a3e7;
}

.create-by-template:hover {
  background-color: #4da0e7;
}

.select-template{
  background-position: 0 2px;
  width: 162px;
  // height: 110px;
  background-size: calc(386px * .70);
  position: relative;
  top: 2px;
}

.create-by-import{
  background-color: #93d782;
}

.compile-questionnaire{
  width: 128px;
  height: 112px;
  background-position: 0 -107px;
  background-size: calc(386px * .68);
  position: relative;
  top: 1px;
}
</style>
